
<template>
  <div class="container">
      <div class="main">
        <!-- 个人信息 -->
        <div>
            <div class="user_massage">
                <div class="location"><i class="iconfont icon-location"></i></div>
                <div class="user">
                    <div class="top">
                        <h5>admin</h5>
                        <p>18567259127</p>
                    </div>
                    <div class="bottom">河南省 郑州市 新郑市 文昌路一号 </div>
                </div>
                <a href="#" class="more iconfont icon-more"></a>
            </div>
        </div>
        <!-- 个人信息结束 -->
        <!-- 商品模块开始 -->
        <div class="goods">
            <div class="info">
                <h4>玫瑰花茶</h4>
                <p class="youhui">领券立减3元...</p>
                <p class="pink">美容养颜</p>
                <div class="price">
                    <span class="red">¥<i>19.9 </i></span>
                    <span>¥25</span>
                </div>
            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
                <span> 商品数量 2</span>
            </div>
        </div>
        <!-- 商品模块结束 -->
        <!-- 物流配送开始 -->
        <div class="rest">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5 class="min">买家备注</h5>
                <p>希望可以尽快发货，谢谢~</p>
            </div>
            <div>
                <h5>支付方式</h5>
                <p>支付宝<i class="iconfont iconfont icon-more"></i></p>
            </div>
        </div>
        <!-- 物流配送结束 -->
        <!-- 收费价格开始 -->
        <div class="sale">
            <div>
                <h5>商品总价</h5>
                <p>￥39.80</p>
            </div>
            <div>
                <h5>运费</h5>
                <p>￥0.00</p>
            </div>
            <div>
                <h5>折扣</h5>
                <p>-￥3.00</p>
            </div>
        </div>
        <!-- 收费价格结束 -->
    </div>
    <!-- 主体模块结束 -->
    <!-- 底部模块开始 -->
    <footer class="pay">
        <div class="left">合计：
            <span class="red">￥
                <i>36.80</i>
            </span>
        </div>
                 
        <div class="right">
            <a href="https://auth.alipay.com/login/index.htm">去支付</a>
        </div>
    </footer>
    <!-- 底部模块结束 -->

  </div>
</template>
<script>
export default {
    
}
</script>
<style>

 
body {
    background-color: #f8f8f8;
}
 
 
/* 主体模块开始 */
 
.main {
    padding: 12px 11px 80px;
}
 
.main>div {
    margin-bottom: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
}
 
 
/* .main div:nth-child(1) {
    height: 85px;
} */
 
 
/* .main div:nth-child(2) {
    height: 108px;
}
.main div:nth-child(3) {
    height: 125px;
}
.main div:nth-child(4) {
    height: 125px;
} */
 
 
/* 个人信息 */
 
.user_massage {
    display: flex;
    padding: 15px 0px 14px 11px;
}
 
.user_massage .location {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
    border-radius: 15px;
    text-align: center;
    line-height: 30px;
    color: rgb(255, 255, 255);
}
 
.user_massage .user {
    flex: 1;
    color: rgb(0, 0, 0);
    font-size: 15px;
}
 
.user_massage .more {
    width: 44px;
    height: 44px;
    background-color: rgb(255, 255, 255);
    line-height: 44px;
    text-align: center;
    color: rgb(0, 0, 0);
}
 
.user .top {
    display: flex;
}
 
.user .top h5 {
    padding-right: 23px;
    font-size: 15px;
    font-weight: 400;
}
 
.user .top p {
    font-size: 13px;
}
 
.user .bottom {
    margin-top: 13px;
    font-size: 13px;
}
 
 
/* 个人信息结束 */
 
 
/* 商品模块开始 */
 
.goods {
    display: flex;
    padding: 11px 0px 11px 11px;
}
 
.goods .pic {
    width: 85px;
    height: 85px;
    margin-right: 12px;
    border-radius: 2px;
}
 
.goods .info {
    flex: 1;
    font-size: 13px;
    color: rgb(0, 0, 0);
}
 
.goods .count {
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}
 
.info h4 {
    font-size: 13px;
    font-weight: 400;
    color: #262626;
}
 
.info .youhui {
    font-size: 13px;
    margin: 5px 0;
}
 
.info .pink {
    display: inline-block;
    background-color: #f7f7f8;
    padding: 3px 4px;
    font-size: 11px;
    border-radius: 2px;
    color: #888888;
}
 
.info .price {
    margin-top: 10px;
    font-size: 12px;
}
 
.info .price .red {
    color: #cf4444;
}
 
.info .price i {
    font-size: 16px;
}
 
.price span:nth-child(2) {
    margin-left: 14px;
    color: #999;
    text-decoration: line-through;
}
 
 
/* 商品模块结束 */
 
 
/* 物流配送开始 */
 
.rest {
    padding: 15px;
}
 
.rest>div {
    display: flex;
    margin-bottom: 30px;
}
 
.rest div:last-child {
    margin-bottom: 0;
}
 
.rest div:nth-child(odd) {
    justify-content: space-between;
}
 
.rest h5,
.rest p {
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}
 
.rest div:nth-child(2) p {
    margin-left: 20px;
    font-size: 12px;
    color: #989898;
}
 
.rest i {
    font-size: 9px;
    color: #808080;
}
 
 
/* .min {} */
 
 
/* 物流配送结束 */
 
 
/* 收费价格开始 */
 
.sale {
    padding: 15px;
}
 
.sale>div {
    display: flex;
    margin-bottom: 30px;
}
 
.sale div:last-child {
    margin-bottom: 0;
}
 
.sale div {
    justify-content: space-between;
}
 
.sale h5,
.sale p {
    font-size: 13px;
    color: #262626;
    font-weight: 400;
}
 
 
/* 收费价格结束 */
 
 
/* 主体模块结束 */
 
 
/* 底部模块开始 */
 
.pay {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 80px;
    background-color: #fff;
    border-top: 1px solid #ededed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 9px;
    padding-right: 11px;
}
 
.left .red {
    color: #cf4444;
    font-size: 11px;
}
 
.left i {
    font-size: 20px;
}
 
.right a {
    display: block;
    width: 90px;
    height: 35px;
    background-image: linear-gradient(90deg, #6fc2aa 5%, #54b196 100%);
    color: rgb(255, 255, 255);
    font-size: 13px;
    text-align: center;
    line-height: 35px;
    border-radius: 3px;
}

</style>